<template>
  <Header active="login"></Header>
  <section class="text-gray-600 body-font">
    <div class="container px-5 py-24 mx-auto flex flex-wrap items-center">
      <div
        class="lg:w-2/6 md:w-1/2 bg-gray-100 shadow rounded-lg p-8 flex flex-col md:ml-auto md:mr-auto w-full mt-10 md:mt-0 card"
      >
        <h2 class="text-gray-900 text-lg font-medium title-font mb-5">登录</h2>

        <div class="form-control">
          <label class="label">
            <span class="label-text">用户名</span>
          </label>
          <input v-model="username" class="input input-bordered" placeholder="用户名" type="text" />
        </div>

        <div class="form-control">
          <label class="label">
            <span class="label-text">密码</span>
          </label>
          <input
            v-model="password"
            class="input input-bordered"
            placeholder="密码"
            type="password"
          />
        </div>

        <button class="btn mt-5 btn-primary" @click="login">
          登录

          <svg
            class="inline-block w-6 h-6 ml-2 stroke-current"
            fill="none"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M9 5l7 7-7 7"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
            ></path>
          </svg>
        </button>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { setToken } from '@/utils/auth'
import { apiPostToken } from '@/http/login'
import Header from '@/components/AppHeader.vue'

const username = ref('')
const password = ref('')
const router = useRouter()

async function login() {
  const result = await apiPostToken(username.value, password.value)
  if (result) {
    setToken(result.data.token)
    await router.replace('/')
  }
}
</script>
